<template>
  <div class="notice-dialog">
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="通知详情"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="0px"
        label-position="left"
      >
        <div class="notice-form-title">通知标题</div>
        <el-form-item label="" prop="title">
          <!-- <el-input
            v-model="formData.title"
            placeholder="请输入任务名称"
            :maxlength="50"
            show-word-limit
            clearable
          ></el-input> -->
          <span>{{ formData.title }}</span>
        </el-form-item>
        <div class="notice-form-title">通知详情</div>
        <el-form-item label="" prop="introduction">
          <!-- <editor v-model="formData.introduction" :min-height="192" /> -->
          <!-- <editor
            class="WangEditor"
            @select="getRich"
            ref="childrenRef"
            :editValue="formData.introduction"
            v-if="dialogVisible"
          /> -->
          <!-- <editor v-model="formData.introduction" v-if="dialogVisible" /> -->
          <div v-html="formData.introduction"></div>
        </el-form-item>
        <div class="notice-form-title">相关附件</div>
        <el-form-item label="" prop="fileList">
          <!-- <el-upload
            ref="fileListUpload"
            v-model:file-list="fileList"
            :action="fileListAction"
            multiple
            :before-upload="fileListBeforeUpload"
            :headers="headers"
            :on-success="handleUploadSuccess"
          >
            <el-button size="small" type="primary">+点击上传</el-button>
          </el-upload> -->
          <el-row
            v-for="(item, index) in fileList"
            :key="'f' + index"
            style="width: 100%"
          >
            <el-col :span="16">{{ item.response.name }}</el-col>
            <el-col :span="8"
              ><el-button
                link
                type="primary"
                icon="Download"
                @click="download(item.response)"
                >下载</el-button
              ></el-col
            >
          </el-row>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getNoticeInfo } from "@/api/pms/project";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const fileListAction = ref(import.meta.env.VITE_APP_BASEURL + "/common/upload");
const { proxy } = getCurrentInstance();
const props = defineProps({
  currentNoticeId: { type: String, default: "" },
  projectId: {
    type: String,
    default: "",
  },
});
const formRef = ref();
const memberDialogVisible2 = ref(false);
const data = reactive({
  formData: {
    title: "",
    announcementFileList: [],
    introduction: undefined,
  },
  rules: {
    title: [
      {
        required: true,
        message: "请输入通知标题",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
// 上传请求路径
// 上传文件列表
const fileList = ref([]);
/**
 * @name: 上传之前的文件判断
 * @description: 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function fileListBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  return isRightSize;
}
// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  if (props.currentNoticeId) {
    getList();
  }
}
//修改时初始化
function getList() {
  getNoticeInfo({ id: props.currentNoticeId }).then((response) => {
    formData.value.title = response.data.title;
    formData.value.introduction = response.data.introduction;
    fileList.value = response.data.fileList.map((item) => {
      let i = {
        name: item.name,
        response: {
          url: item.url,
          fullurl: item.fullurl,
          name: item.name,
        },
      };
      return i;
    });
  });
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  formRef.value.resetFields();
  formData.value = {
    title: "",
    announcementFileList: [],
    introduction: "",
  };
  fileList.value = [];
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
function handelConfirm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单

    // 回调父级组件
    let params = {
      title: formData.value.title,
      introduction: formData.value.introduction,
      announcementFileList: [],
      id: props.currentNoticeId ? props.currentNoticeId : "",
    };
    params.announcementFileList = fileList.value.map((item) => {
      let i = {
        url: item.response.url,
        fullurl: item.response.fullurl,
        name: item.response.name,
      };
      return i;
    });
    console.log("params");
    emit("confirm", params);
    close();
  });
}
function handleUploadSuccess(res) {}
//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  formData.value.introduction = value;
};
/** 下载文件 */
function download(item) {
  proxy.download(
    "/common/download",
    {
      fileName: item.url.replace("/profile/upload", ""),
      delete: false,
    },
    item.name
  );
}
</script>
<style lang="scss">
.el-upload__tip {
  line-height: 1.2;
}
.notice-dialog {
  .el-dialog {
    .el-dialog__body {
      height: 500px;
      overflow-y: auto;
      .notice-form-title {
        margin: 20px 0;
        border-left: 3px solid rgb(64, 158, 255);
        padding: 0 10px;
        font-weight: bold;
      }
      .el-form {
        width: 90%;
        .el-tag {
          margin-right: 10px;
        }
        .check-list {
          padding: 10px;
          &:nth-child(even) {
            background: rgba(64, 158, 255, 0.2);
          }
        }
      }
    }
  }
}
</style>
